<template>
  <div class="nav-header">
    <el-icon class="fold-menu" @click="isFoldClicked">
      <Fold v-if="!isFoldMenu" />
      <Expand v-else />
    </el-icon>
    <my-breadcrumb :breadcrumbArr="breadcrumbArr" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import { Fold, Expand } from '@element-plus/icons-vue'
import MyBreadcrumb from '@/components/breadcrumb/index.vue'
import localCatch from '@/utils/setCatch'
import { mapToBreadArr } from '@/utils/mapMenus'
export default defineComponent({
  components: {
    Fold,
    Expand,
    MyBreadcrumb
  },
  emits: ['changeIsFold'],
  setup(props, context) {
    const isFoldMenu = ref(false)
    const breadcrumbArr = computed(() => {
      const route = useRoute()
      const routePath = route.path
      const userMenus = localCatch.getCatch('menu')
      return mapToBreadArr(userMenus, routePath)
    })

    // event handle
    const isFoldClicked = () => {
      isFoldMenu.value = !isFoldMenu.value
      context.emit('changeIsFold', isFoldMenu.value)
    }
    return {
      isFoldMenu,
      breadcrumbArr,
      isFoldClicked
    }
  }
})
</script>

<style scoped lang="less">
.nav-header {
  display: flex;
  align-items: center;
  .fold-menu {
    font-size: 28px;
    margin-right: 15px;
  }
}
</style>
